import 'package:flutter/material.dart';
import 'package:flutter_pink_app/style/text.dart';
import "../serialized/recommend.dart";
import '../style/decoration.dart';
import '../util.dart';

typedef dynamic VideoInfoHandle<T extends VideoInfo>(
    BuildContext ctx, T info); // 处理影片信息函数

class VideoCard extends StatelessWidget {
  VideoCard(this._videoInfo, this._cardHeight,
  {this.onTap, this.imgHeightRatio = (3 / 5)});
  final double _cardHeight; // 卡片高度
  final VideoInfo _videoInfo; // 影片信息
  final VideoInfoHandle onTap; // 处理卡片点击函数
  final double imgHeightRatio; // 图片高度占卡片比例

  // 构建上方图像部分
  Stack _buildImage() {
    return Stack(
      // 相对定位
      children: <Widget>[
        FractionallySizedBox(
            // 横向占满
            widthFactor: 1,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(6),
              child: Image.network(_videoInfo.cover,
                  height: _cardHeight * imgHeightRatio, fit: BoxFit.cover),
            )),
        Positioned(bottom: 0, left: 0, right: 0, child: _buildFloat())
      ],
    );
  }

  // 构建图片浮层部分
  Container _buildFloat() {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 8, horizontal: 5),
      decoration: verticalGrayGradient,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          _buildIconText(
              Icons.ondemand_video, formatPlayCount(_videoInfo.view)),
          _buildIconText(
              Icons.favorite_rounded, formatRecordCount(_videoInfo.favorite)),
          _buildIconText(null, formatVideoTime(_videoInfo.duration)),
        ],
      ),
    );
  }

  // 构建图标文字标注详情
  Row _buildIconText(IconData icon, String text) {
    return Row(
      children: <Widget>[
        if (icon != null) Icon(icon, color: Colors.white, size: 12), // 空安全
        Padding(
            padding: EdgeInsets.only(left: 3),
            child: Text(text, style: tinyWhiteStyle))
      ],
    );
  }

  // 构建下方文字详情部分
  Padding _buildDetail() {
    return Padding(
      padding: const EdgeInsets.all(5.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start, // 从左到右
        children: <Widget>[
          Expanded(
            child: Text(_videoInfo.title,
                style: videoCardStyle,
                maxLines: 2,
                overflow: TextOverflow.ellipsis),
          ), // 多于两行则折叠
          _buildAuthor()
        ],
      ),
    );
  }

  // 构建作者信息部分
  Row _buildAuthor() {
    final author = _videoInfo.owner;
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Row(
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Image.network(author.face, height: 20, width: 20),
            ),
            Padding(
              padding: EdgeInsets.only(left: 10),
              child: Text(author.name, style: ownerCardStyle),
            )
          ],
        ),
        Icon(
          Icons.format_list_bulleted,
          size: 10,
          color: Colors.grey,
        )
      ],
    );
  }

  @override
  Widget build(BuildContext cardCtx) {
    return GestureDetector(
      onTap: () => onTap(cardCtx, _videoInfo),
      child: Card(
        margin: const EdgeInsets.symmetric(vertical: 4),
        key: ValueKey(_videoInfo.id),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, // 横向顺序排列
          children: <Widget>[_buildImage(), Expanded(child: _buildDetail())],
        ),
      ),
    );
  }
}
